<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>我的电视</title>
  <!-- 重置css -->
  <link href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" rel="stylesheet">

  <!-- 核心 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3.4.23/dist/vue.global.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

  <!-- 日期格式化 -->
  <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/zh-cn.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>

  <!-- vant -->
  <link href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css" rel="stylesheet" />
  <script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>

  <!-- 工具 -->
  <script src="https://cdn.jsdelivr.net/npm/humanize-duration@3.32.0/humanize-duration.min.js"></script>
</head>

<body>
  <div class="min-h-100vh bg-#F7F8FA py-46px" id="app">
    <div class="p-20px pt-0">
      <div class="ml-16px text-32px">我的电视</div>
      <div class="ml-16px text-gray text-14px">
        https://github.com/yaoxieyoulei/my_tv
      </div>
    </div>

    <van-notice-bar :scrollable="false" text="以下设置修改后，需要重启应用生效" wrapable></van-notice-bar>

    <template v-if="settings">
      <van-cell-group inset title="应用">
        <van-cell label="需要在设备系统进行设置" title="开机自启">
          <template #extra>
            <van-switch @change="confirmSettings" size="24" v-model="settings.appBootLaunch" />
          </template>
        </van-cell>
      </van-cell-group>

      <van-cell-group inset title="直播源">
        <van-cell :label="settings.iptvChannelChangeFlip ? '方向键上：下一个频道；方向键下：上一个频道': '方向键上：上一个频道；方向键下：下一个频道'"
          title="换台反转">
          <template #extra>
            <van-switch @change="confirmSettings" size="24" v-model="settings.iptvChannelChangeFlip" />
          </template>
        </van-cell>

        <van-cell title="自定义直播源">
          <template #label>
            <van-space class="w-full" direction="vertical" size="small">
              <span>支持m3u链接与tvbox链接</span>
              <span>不支持多源，若存在多源会出现重复的频道</span>
              <van-field class="!p-0" placeholder="置为空时，将恢复默认" v-model="settings.iptvCustomSource"></van-field>
            </van-space>
          </template>

          <template #extra>
            <van-button @click="settings.iptvSourceCacheTime = 0; confirmSettings()" size="small" type="primary">推送链接
            </van-button>
          </template>
        </van-cell>

        <van-cell title="直播源精简">
          <template #label>
            <van-space direction="vertical" size="small">
              <span>{{ settings.iptvSourceSimplify ? '显示精简直播源(仅央视、地方卫视)':
                '显示完整直播源' }}
              </span>
              <span>{{ settings.iptvSourceSimplify ? '精简规则：频道名称以·CCTV·开头或以·卫视·结尾'
                : '' }}
              </span>
            </van-space>
          </template>

          <template #extra>
            <van-switch @change="confirmSettings" size="24" v-model="settings.iptvSourceSimplify" />
          </template>
        </van-cell>

        <van-cell title="直播源缓存">
          <template #label>
            {{ settings.iptvSourceCacheTime > 0 ? `缓存于
            ${dayjs(settings.iptvSourceCacheTime).fromNow()}` : '未缓存' }}
          </template>

          <template #extra>
            <van-button @click="settings.iptvSourceCacheTime = 0; confirmSettings()" size="small" type="warning">清除缓存
            </van-button>
          </template>
        </van-cell>

        <van-cell title="直播源缓存时间">
          <template #label>
            {{ foramtDuration(settings.iptvSourceCacheKeepTime) }}
          </template>

          <template #extra>
            <van-space>
              小时
              <van-stepper :min="0" :model-value="settings.iptvSourceCacheKeepTime / 1000 / 60 / 60"
                @change="confirmSettings()"
                @update:model-value="settings.iptvSourceCacheKeepTime = $event * 1000 * 60 * 60"></van-stepper>
            </van-space>
          </template>
        </van-cell>
      </van-cell-group>

      <van-cell-group inset title="节目单">
        <van-cell label="在低端设备上，首次加载时可能会有跳帧风险" title="节目单启用">
          <template #extra>
            <van-switch @change="confirmSettings" size="24" v-model="settings.epgEnable" />
          </template>
        </van-cell>

        <van-cell title="自定义节目单">
          <template #label>
            <van-field class="!p-0" placeholder="置为空时，将恢复默认" v-model="settings.epgCustomXml"></van-field>
          </template>

          <template #extra>
            <van-button @click="settings.epgXmlCacheTime = 0; settings.epgCacheHash = 0; confirmSettings()" size="small"
              type="primary">推送链接
            </van-button>
          </template>
        </van-cell>

        <van-cell title="节目单缓存">
          <template #label>
            {{ settings.epgXmlCacheTime > 0 ? `缓存于
            ${dayjs(settings.epgXmlCacheTime).fromNow()}` : '未缓存' }}
          </template>

          <template #extra>
            <van-button @click="settings.epgXmlCacheTime = 0; settings.epgCacheHash = 0; confirmSettings()" size="small"
              type="warning">
              清除缓存
            </van-button>
          </template>
        </van-cell>

        <van-cell title="节目单刷新时间阈值">
          <template #label>
            在{{ settings.epgRefreshTimeThreshold }}点之前，不会获取节目单
          </template>

          <template #extra>
            <van-space>
              小时
              <van-stepper @change="confirmSettings()" integer v-model="settings.epgRefreshTimeThreshold"></van-stepper>
            </van-space>
          </template>
        </van-cell>
      </van-cell-group>
    </template>
  </div>

  <script>
    const { createApp, ref, onMounted, watch, nextTick } = Vue

    const baseUrl = ""

    dayjs.locale('zh-cn')
    dayjs.extend(dayjs_plugin_relativeTime)

    createApp({
      setup() {

        const tabActive = ref(0)

        const settings = ref()
        async function confirmSettings() {
          let loading = vant.Toast.loading({ message: '加载中...', forbidClick: true, duration: 0 })
          try {
            await fetch(`${baseUrl}/api/settings`, {
              method: "POST",
              body: JSON.stringify(settings.value)
            })
            await refreshSettings()
            loading.clear()
          } catch (e) {
            vant.Toast.fail('无法修改设置')
            console.error(e)
          }
        }
        async function refreshSettings() {
          let loading = vant.Toast.loading({ message: '加载中...', forbidClick: true, duration: 0 })

          try {
            settings.value = await (await fetch(`${baseUrl}/api/settings`)).json()
            loading.clear()
          } catch (e) {
            vant.Toast.fail('无法获取设置')
            console.error(e)
          }
        }


        onMounted(async () => {
          await refreshSettings()
        })

        function foramtDuration(ms) {
          return humanizeDuration(ms, { language: 'zh_CN', round: true, largest: 2 })
        }

        return {
          dayjs,
          foramtDuration,
          tabActive,
          settings,
          confirmSettings,
        }
      }
    })
      .use(vant)
      .mount('#app')
  </script>
</body>

</html>
